<template>
  <div class="app-container">
    <!--表单查询-->
    <!--:inline="true"代表在一行显示-->
    <el-form :inline="true"
             :model="actQuery"
             ref="actQuery"
             :rules="queryRules"
             v-if="advanced"
             class="demo-form-inline">

      <el-form-item label="活动名称" prop="activityTitle">
        <el-input v-model="actQuery.activityTitle" placeholder="活动名称"></el-input>
          {{actQuery.activityTitle}}
      </el-form-item>

      <el-form-item label="活动开始时间" prop="activityTime">
        <el-date-picker v-model="actQuery.activityTime"
                        type="datetime"
                        placeholder="活动开始时间"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        default-time="00:00:00"
        ></el-date-picker>
      </el-form-item>

      <el-form-item label="活动地点" prop="activityPlace">
        <el-input v-model="actQuery.activityPlace" placeholder="活动地点"></el-input>
      </el-form-item>

      <el-form-item label="参与人姓名" prop="userName">
        <el-input v-model="actQuery.userName" placeholder="参与人姓名"></el-input>
      </el-form-item>

      <el-form-item label="报名时间" prop="createTime">
        <el-date-picker v-model="actQuery.createTime"
                        type="datetime"
                        placeholder="报名时间"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        default-time="00:00:00"
                        width="100px"
        ></el-date-picker>
      </el-form-item>

      <el-form-item label="报名状态" prop="status">
        <el-select v-model="actQuery.status" placeholder="报名状态">
          <el-option label="未报名" value="0"></el-option>
          <el-option label="已报名" value="1"></el-option>
        </el-select>
      </el-form-item>

    </el-form>

    <!-- 操作 -->
    <div>
       <span class="table-page-search-submitButtons">

          <span class="submitButtons-left">
            <el-button size="small" type="success" @click="addAct" icon="el-icon-plus" plain>新增</el-button>
            <el-button size="small" @click="" icon="el-icon-download">导出</el-button>
          </span>

          <span class="submitButtons-right">
            <el-button size="small" type="primary" @click="submitQuery" icon="el-icon-search" plain>查询</el-button>
            <el-button size="small" @click="resetQuery" icon="el-icon-refresh">重置</el-button>
            <a @click="toggleAdvanced" style="margin-left: 8px; color: #00BFFF; font-size: 14px">
              {{ advanced ? '收起' : '展开' }}
              <i :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" />
            </a>
          </span>

       </span>
    </div>

    <!-- 表格 -->
    <el-table
      v-loading="isLoading"
      :data="actList"
      element-loading-text="数据加载中"
      border
      fit
      highlight-current-row
      @selection-change="handleSelectionChange"
      ref="multipleRecommendTable"
    >

      <el-table-column
        label="序号"
        width="70"
        align="center">
        <template slot-scope="scope">
          {{ (queryParams.currentPage - 1) * queryParams.limit + scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column prop="activityTitle" label="活动名称" width="110"></el-table-column>

      <el-table-column prop="activityTime" label="活动时间" width="160"></el-table-column>

      <el-table-column prop="activityPlace" label="活动地点" width="110"></el-table-column>

      <el-table-column prop="userId" label="参与人编号"></el-table-column>

      <el-table-column prop="userName" label="参与人姓名"></el-table-column>

      <el-table-column label="报名状态">
        <template slot-scope="scope">
          {{ scope.row.status === 0? "未报名" : "已报名"}}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="200" align="center">

        <template slot-scope="scope">

          <el-button type="primary" @click="updateAct(scope.row)" size="mini" icon="el-icon-edit" round plain>修改</el-button>

          <el-button type="danger" size="mini" icon="el-icon-delete"
                     @click="removeActById(scope.row)" round plain>删除
          </el-button>

        </template>
      </el-table-column>

    </el-table>

    <!--@current-change="getTeacherListPage" 每次切换上一页、下一页都会调用getTeacherListPage-->
    <!-- 分页 -->
    <el-pagination
      background
      :current-page="queryParams.currentPage"
      :page-size="queryParams.limit"
      :total="total"
      style="padding: 60px 0; text-align: center;"
      layout="total,prev, pager, next, jumper"
      @current-change="getActListPage"
    />

    <!--活动新增-->
    <el-dialog :title="title" @close="addActCancel" :visible.sync="addVisible" width="800px" append-to-body>
      <el-form :model="addForm" ref="addForm" label-width="120px" :rules="addActRules">

        <el-form-item label="选择活动" prop="activityTitle" width="100px">
          <el-input @click.native="selectPublishAct" placeholder="请选择" v-model="addForm.activityTitle" style="cursor: hand"/>
        </el-form-item>

            <!--添加活动对话框-->
            <el-dialog :title="title" @close="queryPublishActClose" :visible.sync="queryPublishActVisible" width="80%" append-to-body>
              <!--查询栏-->
              <el-form :inline="true"
                       :model="publishActQuery"
                       class="demo-form-inline">

                <el-form-item label="活动标题" prop="activityTitle">
                  <el-input v-model="publishActQuery.activityTitle" placeholder="请输入活动标题"></el-input>
                </el-form-item>

                <el-form-item label="活动时间" prop="activityTime">
                  <el-date-picker v-model="publishActQuery.activityTime"
                                  type="datetime"
                                  placeholder="请输入活动时间"
                                  value-format="yyyy-MM-dd HH:mm:ss"
                                  default-time="00:00:00"
                                  style="width: 100%"
                                  width="100px"
                  ></el-date-picker>
                </el-form-item>

                <el-form-item label="活动地点" prop="activityPlace">
                  <el-input v-model="publishActQuery.activityPlace" placeholder="请输入活动地点"></el-input>
                </el-form-item>

                <el-form-item>
                  <el-button size="small" type="primary" @click="submitActPublishQuery" icon="el-icon-search" plain>查询</el-button>
                  <el-button size="small" @click="resetActPublishQuery" icon="el-icon-refresh">重置</el-button>
                </el-form-item>
              </el-form>

              <!--表格-->
              <el-table v-loading="isLoading"
                        :data="actPublishList"
                        element-loading-text="数据加载中"
                        border
                        fit
                        @selection-change="handleSelectionChange"
                        ref="multiplePublishActTable"
                        highlight-current-row>

                <el-table-column type="selection" width="55"></el-table-column><!--选择一行-->
                <el-table-column prop="id" label="活动编号" width="110"></el-table-column>
                <el-table-column prop="title" label="活动标题"></el-table-column>
                <el-table-column prop="activityTime" label="活动时间"></el-table-column>
                <el-table-column prop="activityPlace" label="活动地点"></el-table-column>
                <el-table-column prop="activityDetail" label="活动细节"></el-table-column>
              </el-table>

              <el-pagination
                background
                :current-page="queryParams.currentPage"
                :page-size="queryParams.limit"
                :total="actPublishListTotal"
                style="padding: 60px 0; text-align: center;"
                layout="total,prev, pager, next, jumper"
                @current-change="getActPublishList"
              />

              <div slot="footer" class="dialog-footer" style="margin-top: -134px">
                <el-button size="small" type="primary" @click="selectActPublish" icon="el-icon-search" plain>选择</el-button>
                <el-button size="small" @click="queryPublishActClose" icon="el-icon-refresh">关闭</el-button>
              </div>

            </el-dialog>

        <el-form-item label="活动编号" prop="activityId" >
          <el-input v-model="addForm.activityId" placeholder="请输入活动编号" :disabled="editPublishAct"/>
        </el-form-item>

        <el-form-item label="活动名称" prop="activityTitle" >
          <el-input v-model="addForm.activityTitle" placeholder="请输入活动名称" :disabled="editPublishAct"/>
        </el-form-item>

        <el-form-item label="活动时间" prop="activityTime">

          <el-date-picker v-model="addForm.activityTime"
                          type="datetime"
                          placeholder="活动时间"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          default-time="00:00:00"
                          style="width: 100%"
                          width="100px"
                          :disabled="editPublishAct"
          ></el-date-picker>

        </el-form-item>

        <el-form-item label="活动地点" prop="activityPlace">
          <el-input v-model="addForm.activityPlace" placeholder="请输入活动地点"  :disabled="editPublishAct"/>
        </el-form-item>

        <el-form-item label="选择参与人" prop="userName">
          <el-input @click.native="openUserCard" placeholder="请选择" v-model="addForm.userName"/>
        </el-form-item>

          <!--添加用户卡对话框-->
          <el-dialog :title="title" @close="closeUserCard" :visible.sync="queryUserCardVisible" width="80%" append-to-body>
            <!--查询栏-->
            <el-form :inline="true"
                     :model="userCardQuery"
                     class="demo-form-inline">

              <el-form-item label="参与人姓名" prop="name">
                <el-input v-model="userCardQuery.name" placeholder="请输入参与人姓名"></el-input>
              </el-form-item>

              <el-form-item label="参与人联系方式" prop="mobile">
                <el-input v-model="userCardQuery.mobile" placeholder="请输入参与人联系方式"></el-input>
              </el-form-item>

              <el-form-item>
                <el-button size="small" type="primary" @click="submitUserCardQuery" icon="el-icon-search" plain>查询</el-button>
                <el-button size="small" @click="resetUserCardQuery" icon="el-icon-refresh">重置</el-button>
              </el-form-item>

            </el-form>

            <!--表格-->
            <el-table v-loading="isLoading"
                      :data="userCardList"
                      element-loading-text="数据加载中"
                      border
                      fit
                      @selection-change="handleUserCardSelectionChange"
                      ref="multipleUserCardTable"
                      highlight-current-row>

              <el-table-column type="selection" width="55"></el-table-column><!--选择一行-->
              <el-table-column prop="id" label="用户编号"></el-table-column>
              <el-table-column prop="name" label="用户姓名"></el-table-column>
              <el-table-column prop="cardType" label="用户卡类型"></el-table-column>
              <el-table-column prop="cardNum" label="用户卡号"></el-table-column>
              <el-table-column prop="mobile" label="用户手机号"></el-table-column>
            </el-table>

            <!--分页器-->
            <el-pagination
              background
              :current-page="queryParams.currentPage"
              :page-size="queryParams.limit"
              :total="userCardListTotal"
              style="padding: 60px 0; text-align: center;"
              layout="total, prev, pager, next, jumper"
              @current-change="getUserCardList"
            />

            <div slot="footer" class="dialog-footer" style="margin-top: -134px">
              <el-button size="small" type="primary" @click="selectUserCard" icon="el-icon-search" plain>选择</el-button>
              <el-button size="small" @click="closeUserCard" icon="el-icon-refresh">关闭</el-button>
            </div>

        </el-dialog>

        <el-form-item label="参与人编号" prop="userId">
          <el-input v-model="addForm.userId" placeholder="请输入活动姓名" :disabled="editUserCard"/>
        </el-form-item>

        <el-form-item label="参与人姓名" prop="userName">
          <el-input v-model="addForm.userName" placeholder="请输入活动姓名" :disabled="editUserCard"/>
        </el-form-item>

        <el-form-item label="参与人联系方式" prop="userMobile">
          <el-input v-model="addForm.userMobile" placeholder="请选择参与人联系方式" :disabled="editUserCard"/>
        </el-form-item>

        <el-form-item label="报名状态" prop="status" >
          <el-radio-group v-model="addForm.status">
            <el-radio-button label="未报名" ></el-radio-button>
            <el-radio-button label="已报名" ></el-radio-button>
          </el-radio-group>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAddAct">保存</el-button>
        <el-button @click="addActCancel">取 消</el-button>
      </div>

    </el-dialog>

    <!--活动修改-->
    <el-dialog :title="title" @close="updateActCancel" :visible.sync="updateVisible" width="800px" append-to-body>
      <el-form :model="updateForm" ref="updateForm" label-width="120px" :rules="updateActRules">

        <el-form-item label="选择活动" prop="activityTitle" width="100px">
          <el-input @click.native="selectPublishAct" placeholder="请选择" v-model="updateForm.activityTitle" style="cursor: hand"/>
        </el-form-item>

        <!--修改活动对话框 selectPublishAct点击显示时queryPublishActVisible变为true，但是上面的新增对话框不会显示，因为上面的addVisible为false-->
        <el-dialog :title="title" @close="queryPublishActClose" :visible.sync="queryPublishActVisible" width="80%" append-to-body>
          <!--查询栏-->
          <el-form :inline="true"
                   :model="publishActQuery"
                   class="demo-form-inline">

            <el-form-item label="活动标题" prop="activityTitle">
              <el-input v-model="publishActQuery.activityTitle" placeholder="请输入活动标题"></el-input>
            </el-form-item>

            <el-form-item label="活动时间" prop="activityTime">
              <el-date-picker v-model="publishActQuery.activityTime"
                              type="datetime"
                              placeholder="请输入活动时间"
                              value-format="yyyy-MM-dd HH:mm:ss"
                              default-time="00:00:00"
                              style="width: 100%"
                              width="100px"
              ></el-date-picker>
            </el-form-item>

            <el-form-item label="活动地点" prop="activityPlace">
              <el-input v-model="publishActQuery.activityPlace" placeholder="请输入活动地点"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button size="small" type="primary" @click="submitActPublishQuery" icon="el-icon-search" plain>查询</el-button>
              <el-button size="small" @click="resetActPublishQuery" icon="el-icon-refresh">重置</el-button>
            </el-form-item>
          </el-form>

          <!--表格-->
          <el-table v-loading="isLoading"
                    :data="actPublishList"
                    element-loading-text="数据加载中"
                    border
                    fit
                    @selection-change="handleSelectionChange"
                    ref="multiplePublishActTable"
                    highlight-current-row>

            <el-table-column type="selection" width="55"></el-table-column><!--选择一行-->
            <el-table-column prop="id" label="活动编号" width="110"></el-table-column>
            <el-table-column prop="title" label="活动标题"></el-table-column>
            <el-table-column prop="activityTime" label="活动时间"></el-table-column>
            <el-table-column prop="activityPlace" label="活动地点"></el-table-column>
            <el-table-column prop="activityDetail" label="活动细节"></el-table-column>
          </el-table>

          <el-pagination
            background
            :current-page="queryParams.currentPage"
            :page-size="queryParams.limit"
            :total="actPublishListTotal"
            style="padding: 60px 0; text-align: center;"
            layout="total,prev, pager, next, jumper"
            @current-change="getActPublishList"
          />

          <div slot="footer" class="dialog-footer" style="margin-top: -134px">
            <el-button size="small" type="primary" @click="selectActPublish" icon="el-icon-search" plain>选择</el-button>
            <el-button size="small" @click="queryPublishActClose" icon="el-icon-refresh">关闭</el-button>
          </div>

        </el-dialog>

        <el-form-item label="活动编号" prop="activityId" >
          <el-input v-model="updateForm.activityId" placeholder="请输入活动编号" :disabled="editPublishAct"/>
        </el-form-item>

        <el-form-item label="活动名称" prop="activityTitle" >
          <el-input v-model="updateForm.activityTitle" placeholder="请输入活动名称" :disabled="editPublishAct"/>
        </el-form-item>

        <el-form-item label="活动时间" prop="activityTime">

          <el-date-picker v-model="updateForm.activityTime"
                          type="datetime"
                          placeholder="活动时间"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          default-time="00:00:00"
                          style="width: 100%"
                          width="100px"
                          :disabled="editPublishAct"
          ></el-date-picker>

        </el-form-item>

        <el-form-item label="活动地点" prop="activityPlace">
          <el-input v-model="updateForm.activityPlace" placeholder="请输入活动地点"  :disabled="editPublishAct"/>
        </el-form-item>

        <el-form-item label="选择参与人" prop="userName">
          <el-input @click.native="openUserCard" placeholder="请选择" v-model="updateForm.userName"/>
        </el-form-item>

        <!--修改用户卡对话框-->
        <el-dialog :title="title" @close="closeUserCard" :visible.sync="queryUserCardVisible" width="80%" append-to-body>
          <!--查询栏-->
          <el-form :inline="true"
                   :model="userCardQuery"
                   class="demo-form-inline">

            <el-form-item label="参与人姓名" prop="name">
              <el-input v-model="userCardQuery.name" placeholder="请输入参与人姓名"></el-input>
            </el-form-item>

            <el-form-item label="参与人联系方式" prop="mobile">
              <el-input v-model="userCardQuery.mobile" placeholder="请输入参与人联系方式"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button size="small" type="primary" @click="submitUserCardQuery" icon="el-icon-search" plain>查询</el-button>
              <el-button size="small" @click="resetUserCardQuery" icon="el-icon-refresh">重置</el-button>
            </el-form-item>

          </el-form>

          <!--表格-->
          <el-table v-loading="isLoading"
                    :data="userCardList"
                    element-loading-text="数据加载中"
                    border
                    fit
                    @selection-change="handleUserCardSelectionChange"
                    ref="multipleUserCardTable"
                    highlight-current-row>

            <el-table-column type="selection" width="55"></el-table-column><!--选择一行-->
            <el-table-column prop="id" label="用户编号"></el-table-column>
            <el-table-column prop="name" label="用户姓名"></el-table-column>
            <el-table-column prop="cardType" label="用户卡类型"></el-table-column>
            <el-table-column prop="cardNum" label="用户卡号"></el-table-column>
            <el-table-column prop="mobile" label="用户手机号"></el-table-column>
          </el-table>

          <el-pagination
            background
            :current-page="queryParams.currentPage"
            :page-size="queryParams.limit"
            :total="userCardListTotal"
            style="padding: 60px 0; text-align: center;"
            layout="total, prev, pager, next, jumper"
            @current-change="getUserCardList"
          />

          <div slot="footer" class="dialog-footer" style="margin-top: -134px">
            <el-button size="small" type="primary" @click="selectUserCard" icon="el-icon-search" plain>选择</el-button>
            <el-button size="small" @click="closeUserCard" icon="el-icon-refresh">关闭</el-button>
          </div>

        </el-dialog>

        <el-form-item label="参与人编号" prop="userId">
          <el-input v-model="updateForm.userId" placeholder="请输入活动姓名" :disabled="editUserCard"/>
        </el-form-item>

        <el-form-item label="参与人姓名" prop="userName">
          <el-input v-model="updateForm.userName" placeholder="请输入活动姓名" :disabled="editUserCard"/>
        </el-form-item>

        <el-form-item label="参与人联系方式" prop="userMobile">
          <el-input v-model="updateForm.userMobile" placeholder="请选择参与人联系方式" :disabled="editUserCard"/>
        </el-form-item>

        <el-form-item label="报名状态" prop="status" >
          <el-radio-group v-model="updateForm.status">
            <el-radio-button label="未报名" ></el-radio-button>
            <el-radio-button label="已报名" ></el-radio-button>
          </el-radio-group>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAddAct">修改</el-button>
        <el-button @click="updateActCancel">取 消</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>
  import act from "@/api/act/act"
  import actPublish from "@/api/act/actPublish"
  import userCard from '@/api/userCard/userCard'
  export default
  {
    name:"actList",
    data()
    {
      return {
        isLoading:true, //是否正在加载
        //新增栏是否打开
        addVisible: false,
        // 高级搜索 展开/关闭
        advanced: false,
        //活动报名查询参数
        actQuery:
          {
            activityTitle:'',
            activityTime: '' ,
            activityPlace:'',
            userName:'',
            createTime:'',
            status: "",
          },
        queryParams: //分页查询参数
          {
            currentPage:1,
            limit:4,
          },
        actList:[],//从后端获取到的活动列表

        total: 0, // 活动报名总记录数

        title:"",

        //点击新增 向后端传递的值
        addForm:
          {
            activityTitle:"",
            activityTime:"",
            activityPlace:"",
            userName:"",
            userMobile:"",
            status: "未报名"
          },

        //查询活动规则检查
        queryRules:
          {
            // name:
            //   [
            //     {required: true, message:"讲师名称不能为空",trigger:"blur"},
            //     { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            //   ],
            // level:
            //   [
            //     {required: true, message:"不能为空",trigger:"change"}
            //   ]
          },

        //添加活动规则检查
        addActRules:
          {
            activityTitle:
              [
                {required: true, message:"参与的活动不能为空！",trigger:"change"}
              ],
            status:
              [
                {required: true, message:"用户报名不能为空！",trigger:"change"}
              ],
            userName:
              [
                {required: true, message:"参与的用户不能为空！",trigger:"change"}
              ]
          },





        //活动修改表单
        updateForm:{
          id:"",
          activityTitle:"",
          activityTime:"",
          activityPlace:"",
          userName:"",
          userMobile:"",
          status: ""
        },
        updateVisible:false,
        updateActRules:{},



        //用户卡列表
        userCardList:[],

        //用户卡查询可见性
        queryUserCardVisible:false,

        //用户卡列表总记录数
        userCardListTotal:0,

        //用户卡查询条件
        userCardQuery:
        {
          name:"",
          mobile:""
        },

        //是否禁用参与人姓名，参与人联系方式
        editUserCard:false,

        //选择哪一行用户卡列表
        multipleUserCardSelection: [],




        //是否禁用活动名称、活动事件、活动地点
        editPublishAct:false,

        //选择哪一行活动列表
        multipleSelection: [],

        //活动列表
        actPublishList:[],

        //活动publishAct的查询参数
        publishActQuery:
        {
          activityTitle:"",
          activityTime:"",
          activityPlace:""
        },

        //点击新增 再点击选择活动 弹出的活动标题对话框可见性
        queryPublishActVisible: false,
        actPublishListTotal:0 // 活动总记录数
      }
    },

    methods:
    {
      //取消修改活动
      updateActCancel()
      {
        this.updateVisible = false;
        //点击取消需要赋updateForm.status默认值，不然第二次修改无法切换
        this.updateForm =  {
          id:"",
          activityTitle:"",
          activityTime:"",
          activityPlace:"",
          userName:"",
          userMobile:"",
          status: ""
        };
        this.editPublishAct = false;
        this.editUserCard = false;
      },

      //打开修改活动对话框
      updateAct(row)
      {
        this.updateVisible = true;
        this.updateForm.id = row.id
        this.updateForm.activityId = row.activityId;
        this.updateForm.activityTitle = row.activityTitle;
        this.updateForm.activityTime = row.activityTime;
        this.updateForm.activityPlace = row.activityPlace;
        this.updateForm.userId = row.userId;
        this.updateForm.userName = row.userName;
        this.updateForm.userMobile = row.userMobile;
        this.updateForm.status =  row.status===0?"未报名":"已报名";

        this.editPublishAct = true;
        this.editUserCard = true;
      },

      //活动报名提交
      submitAddAct()
      {
        if(this.addVisible)
        {
          this.$refs['addForm'].validate((valid) =>
          {
            if(valid)
            {
              this.addForm.status = this.addForm.status==="未报名"? 0 : 1;
              act.addAct(this.addForm).then((response)=>
              {
                if(response.code == 200)
                {
                  this.$message.success(response.message)
                  this.addActCancel();
                  this.getActListPage();
                }else
                {
                  this.$message.error(response.message)
                }
              })
            }
            else
            {
              return false;
            }
          })
        }else if(this.updateVisible)
        {
          this.$refs['updateForm'].validate((valid) =>
          {
            if(valid)
            {
              this.updateForm.status = this.updateForm.status==="未报名"? 0 : 1;
              act.updateAct(this.updateForm).then((response)=>
              {
                if(response.code == 200)
                {
                  this.$message.success(response.message);
                  this.updateActCancel();
                  this.getActListPage();
                }else
                {
                  this.$message.error(response.message);
                }
              })
            }
            else
            {
              return false;
            }
          })
        }
      },

      /*新增活动 dialog 点击取消使dialog消失*/
      addActCancel()
      {
        this.addForm = {
          activityTitle:"",
          activityTime:"",
          activityPlace:"",
          userName:"",
          userMobile:"",
          status: "未报名"
        };
        this.addVisible = false;
        this.editPublishAct = false;
        this.editUserCard = false;
      },
      // 关闭选择用户卡对话框
      closeUserCard()
      {
        this.queryUserCardVisible = false;
        this.userCardQuery = {};
        this.userCardListTotal = 0;
        this.multipleUserCardSelection = [];
      },
      //选中用户卡的一行时的事件
      handleUserCardSelectionChange(val)
      {
        this.multipleUserCardSelection = val;
      },
      resetUserCardQuery()
      {
        this.userCardQuery =
        {
          name:"",
            mobile:""
        };
        this.getUserCardList();
      },
      //查询参与人
      submitUserCardQuery()
      {
        this.getUserCardList();
      },
      //打开查询参与人对话框
      openUserCard()
      {
        this.queryUserCardVisible = true;
        this.getUserCardList();
      },
      //选择参与人姓名
      selectUserCard()
      {
        if(this.multipleUserCardSelection.length > 1)
        {
          this.$message({message:"只能选择一个用户!",type:"warning"});
          this.multipleUserCardSelection = [];
          //清除选中的活动
          this.$refs.multipleUserCardTable.clearSelection();
        }else if(this.multipleUserCardSelection.length === 0 )
        {
          this.$message({message:"请选择一个用户!",type:"warning"});
        } else
        {
          if(this.addVisible)
          {
            this.addForm.userId = this.multipleUserCardSelection[0].id;
            this.addForm.userName = this.multipleUserCardSelection[0].name;
            this.addForm.userMobile = this.multipleUserCardSelection[0].mobile;
            //弹出的用户卡对话框为不可见
            this.queryUserCardVisible = false;
            //禁用参与人姓名、参与人联系电话
            this.editUserCard = true
          }
          if(this.updateVisible)
          {
            this.updateForm.userId = this.multipleUserCardSelection[0].id;
            this.updateForm.userName = this.multipleUserCardSelection[0].name;
            this.updateForm.userMobile = this.multipleUserCardSelection[0].mobile;
            //弹出的用户卡对话框为不可见
            this.queryUserCardVisible = false;
            //禁用参与人姓名、参与人联系电话
            this.editUserCard = true
          }
        }
      },
      //获取用户卡列表
      getUserCardList(currentPage = 1)
      {
        this.queryParams.currentPage = currentPage;
        this.isLoading = true;
        userCard.pageUserCardCondition(this.queryParams.currentPage,this.queryParams.limit,this.userCardQuery)
          .then(response=>
          {
            this.userCardList = response.data.rows;
            this.userCardListTotal = response.data.total;
            this.isLoading = false;
          }).catch(error => {
          this.isLoading = false;
          console.log(error);})
      },



      //选中活动的一行时的事件
      handleSelectionChange(val)
      {
        this.multipleSelection = val;
      },
      //选中一个活动 点击选择时的事件
      selectActPublish()
      {
        if(this.multipleSelection.length > 1)
        {
          this.$message({message:"只能选择一个活动!",type:"warning"});
          this.multipleSelection = [];
          //清除选中的活动
          this.$refs.multiplePublishActTable.clearSelection();
        }else if(this.multipleSelection.length === 0 )
        {
          this.$message({message:"请选择一个活动!",type:"warning"});
        } else
        {
          if(this.addVisible)
          {
            this.addForm.activityId = this.multipleSelection[0].id;
            this.addForm.activityTitle = this.multipleSelection[0].title;
            this.addForm.activityTime = this.multipleSelection[0].activityTime;
            this.addForm.activityPlace = this.multipleSelection[0].activityPlace;
            //弹出的活动标题对话框为不可见
            this.queryPublishActVisible = false;
            //禁用活动名称、活动事件、活动地点输入框
            this.editPublishAct = true
          }
          if(this.updateVisible)
          {
            this.updateForm.activityId = this.multipleSelection[0].id;
            this.updateForm.activityTitle = this.multipleSelection[0].title;
            this.updateForm.activityTime = this.multipleSelection[0].activityTime;
            this.updateForm.activityPlace = this.multipleSelection[0].activityPlace;
            //弹出的活动标题对话框为不可见
            this.queryPublishActVisible = false;
            //禁用活动名称、活动事件、活动地点输入框
            this.editPublishAct = true
          }
        }
      },
      //重置活动查询条件
      resetActPublishQuery()
      {
        this.publishActQuery = {};
        this.getActPublishList();
      },
      //提交活动查询
      submitActPublishQuery()
      {
        this.getActPublishList();
      },

      //获取actPublishList
      getActPublishList(currentPage = 1)
      {
        this.queryParams.currentPage = currentPage;
        this.isLoading = true;
        actPublish.pageActPublishCondition(this.queryParams.currentPage,this.queryParams.limit,this.publishActQuery)
          .then(response=>
          {
            this.actPublishList = response.data.rows;
            this.actPublishListTotal = response.data.total;
            this.isLoading = false;
          }).catch(error => {
          this.isLoading = false;
          console.log(error);})
      },
      //关闭选择活动对话框
      queryPublishActClose()
      {
        this.queryPublishActVisible = false;
        this.publishActQuery = {};
        this.actPublishListTotal = 0;
        this.multipleSelection = [];
      },

      /*点击新增 再点击选择活动 弹出活动对话框*/
      selectPublishAct()
      {
        this.queryPublishActVisible = true;
        this.getActPublishList();
      },

      /*query展开和收起*/
      toggleAdvanced()
      {
        this.advanced = !this.advanced;
      },
      //获取活动分页列表，在选择下一页或者上一页时，分页器会传入当前页的值，所以需要this.queryParams.currentPage = currentPage
      getActListPage(currentPage = 1)
      {
        this.queryParams.currentPage = currentPage
        this.isLoading = true;
        act.pageActCondition(this.queryParams.currentPage,this.queryParams.limit,this.actQuery)
               .then(response=>
               {
                  this.actList = response.data.rows;
                  this.total = response.data.total;
                 this.isLoading = false;
               }).catch(error => {
                 this.isLoading = false;
                 console.log(error);})

      },

      //查询
      submitQuery()
      {
        if(this.advanced === false)
        {
          this.advanced = true;
        }
        this.getActListPage();
        // this.$refs["actQuery"].validate((valid)=>
        // {
        //   if(valid)
        //   {
        //     this.getActListPage();
        //   }else
        //   {
        //     console.log('error submit!!');
        //     return false;
        //   }
        // });
      },
      //清空查询条件
      resetQuery()
      {
          this.queryParams = {
            currentPage:1,
            limit:5,
          };
          this.actQuery= {
            activityTitle:'',
            activityTime: '' ,
            activityPlace:'',
            userName:'',
            createTime:'',
            status: ''
          };
          this.getActListPage();
      },

      //根据活动id删除活动
      removeActById(row)
      {
        let that = this;
        const actId = row.id;
        that.$confirm('是否确认删除该活动的数据项?').then(function ()
        {
          act.delActById(actId).then((response)=>
          {
            if(response.code === 200)
            {
              that.$message({
                message: '删除成功!',
                type: 'success'
              });
            }
            that.getActListPage();
            // if (that.queryParams.currentPage === parseInt((that.total / that.queryParams.limit) + 1) && Number(that.total % that.queryParams.limit) === 1)
            // {
            //   that.queryParams.currentPage -= 1;
            //   that.getTeacherListPage();
            // } else {
            //   that.getTeacherListPage();
            // }
          }).catch(error=> {
            console.log(error)
          })
        })
      },

      //新增活动
      addAct()
      {
        this.addVisible = true;
        this.title = "添加活动";
      }
    },
    created()
    {
      this.getActListPage();
    }
  }
</script>

<style>
  .table-page-search-submitButtons
  {
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

</style>

